<template>
  <h3>文本插值&原始 HTML</h3>

  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>

  <div class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>

  <hr />
  <div>
    <p>Using text interpolation: {{ rawHtml }}</p>

    <hr />

    <p v-text="rawHtml"></p>

    <hr />

    <p>Using text interpolation: {{ rawHtml + '后缀字符串' }}</p>

    <p>Using text interpolation: {{ ` ${rawHtml} 后缀字符串` }}</p>

    <p>Using text interpolation: {{ istrue ? rawHtml : ` ${rawHtml} 后缀字符串false` }}</p>

    <p>Using text interpolation: {{ istrue ? arr.join(',') : ` ${rawHtml} 后缀字符串false` }}</p>

    <p>{{ arr.join(',') }}</p>
    <hr />

    <p v-text="rawHtml + '后缀字符串'"></p>

    <p v-text="` ${rawHtml} 后缀字符串`"></p>

    <p v-text="istrue ? rawHtml : ` ${rawHtml} 后缀字符串false`"></p>

    <p v-text="arr.join(',')"></p>
    <hr />

    <div>
      Using v-html directive:
      <div v-html="rawHtml"></div>
    </div>
    <hr />

    <div>
      <div>Current Count: {{ count }}</div>
      <div>Current doubleCount: {{ doubleCount }}</div>
      <button type="button" @click="counterStore.increment">counterStore.count++</button>
      <div>ref: {{ cr }}</div>
      <button type="button" @click="cr++">ref:cr++</button>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Study2StudDemo1'
}
</script>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(useCounterStore())

const cr = ref(0)

const rawHtml = `
  <span style="color:blue"> 我是html标签span </span>
`
const istrue = false

const arr = ['刘长生', '黄嘉辉', '廖文静']
</script>

<style></style>
